<template>
  <div class="box">
    <header>
      <div class="qiuzhi">
        <router-link to="/Shouye"
          ><span class="iconfont icon-fanhui"></span
        ></router-link>
        求职-X-MOL
      </div>
      <div class="xmol">
        <i class="iconfont icon-touxiang"></i>
        X-MOL
        <i class="iconfont icon-sousuo"></i>
      </div>
      <ul>
        <li>期刊</li>
        <li>资讯</li>
        <li>导师</li>
        <li>问答</li>
        <li>求职</li>
        <li>物性</li>
      </ul>
    </header>
    <main>
      <!-- 形成滚动区域 -->
      <section>
        <div class="sousuo">
          <input type="text" class="text" value="请输入关键词" />
          <input type="button" class="button" value="搜索" />
        </div>
        <dl>
          <dd>职场分类</dd>
          <dd>学科领域</dd>
          <dd><input type="radio" name="danxuan" /> 综合排序</dd>
          <dd><input type="radio" name="danxuan" /> 发布时间</dd>
        </dl>
        <!-- <figure>
                <div class="fshang">
                    <span>【急招】</span>
                    <span>唐勇教授课题组诚聘博士后/科研助理</span>
                </div>
                <div class="fzhong">
                    <span>唐勇课题组</span>
                    <span>33万元起</span>
                </div>
                <div class="fxia">
                    <span>深圳 2021-12-24</span>
                    <span></span>
                </div>
            </figure>
            <figure>
                <div class="fshang">
                    <span>【急招】</span>
                    <span>北京理工大学杨小会团队招收有机化..</span>
                </div>
                <div class="fzhong">
                    <span>北京理工大学杨小会课题组</span>
                    <span>面议</span>
                </div>
                <div class="fxia">
                    <span>北京 2021-12-20</span>
                    <span></span>
                </div>
            </figure>
            <figure>
                <div class="fshang">
                    <span>【急招】</span>
                    <span>北理工杨小会团队招聘有机化学方向..</span>
                </div>
                <div class="fzhong">
                    <span>北京理工大学杨小会课题组</span>
                    <span>30-35万</span>
                </div>
                <div class="fxia">
                    <span>北京 2021-12-20</span>
                    <span></span>
                </div>
            </figure> -->

        <Qzxinxis class="qzxinxis" />
      </section>
    </main>
    <footer>
      <div>
        <i class="iconfont icon-shoucang"></i>
        我的收藏
      </div>
      <div>
        <i class="iconfont icon-mulu"></i>
        职场发布
      </div>
    </footer>
  </div>
</template>

<script>
import Qzxinxis from "../components/Qzxinxis";
export default {
  //   name: "Home",
  name: "QiuZhi",
  components: { Qzxinxis },
};
</script>

<style scoped>
.box {
  width: 375px;
  height: 100%;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 0.74rem;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
}
header .qiuzhi {
  font-size: 0.21rem;
  height: 0.6rem;
  line-height: 0.6rem;
  padding: 0 0.15rem;
}
header .qiuzhi span {
  color: red;
  font-size: 0.3rem;
}
header .xmol {
  display: flex;
  justify-content: space-between;
  font-size: 0.15rem;
  color: white;
  width: 100%;
  height: 0.47rem;
  background-color: #008fef;
  line-height: 0.47rem;
}
header .xmol .icon-touxiang {
  font-size: 0.28rem;
}
header .xmol .icon-sousuo {
  font-size: 0.28rem;
}
header .xmol i {
  margin: 0 0.2rem;
}
header ul {
  height: 0.41rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.14rem;
  padding: 0 0.15rem;
  border-bottom: 1px solid #dedede;
  color: #aaa9a9;
}

main {
  margin-top: 1.5rem;
  flex: 1;
  overflow: auto;
  /* background: hotpink; */
}
section .sousuo {
  height: 0.71rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 0.1rem;
  margin: 0 auto;
  border-radius: 15px;
}
section .sousuo .text {
  width: 2.7rem;
  height: 0.38rem;
  border: 1px solid #dedede;
  color: #dedede;
  border-radius: 6px;
  padding-left: 0.1rem;
  font-size: 0.16rem;
}
section .sousuo .button {
  height: 0.38rem;
  width: 0.64rem;
  color: white;
  background-color: orangered;
  border-radius: 6px;
  font-size: 0.16rem;
}
section .dazao {
  height: 1.3rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 15px auto;
  border-radius: 9px;
}
section dl {
  height: 0.4rem;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 0.4rem;
  font-size: 0.14rem;
  padding: 0 0.15rem;
}
section dd {
  font-size: 0.11rem;
}
section dd input {
  padding-top: 5px;
}

/* 底部 */
footer {
  width: 100%;
  height: 0.6rem;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
}
footer div {
  font-size: 0.12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
ul {
  background-color: #fff;
}
</style>
